<script setup lang="ts">
import {reactive, ref} from "vue";
import Action from "@/modal/Action";
import {ActionName} from "@/components/type";
import Index from "@/components/Pop/index.vue";
import Pop from "@/modal/Pop";

const action = reactive(Action.getInstance());

let pop = reactive(Pop.getInstance());
const toggleShow = (action: ActionName) => {
  pop.toggle();
};
</script>

<template>
  <div class="h-100 d-flex flex-column col-12">
    <index :show="pop.show"
           @emit-show="toggleShow"></index>
    <div class="page-part">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"/>
        </keep-alive>
      </router-view>
    </div>
    <div class="router-part d-flex flex-row justify-content-start align-items-center">
      <nav class="col-3">
        <RouterLink to="/">切换棋盘</RouterLink>
        <RouterLink to="/left_part">切换左图</RouterLink>
        <RouterLink to="/right_part">切换右图</RouterLink>
      </nav>
      <nav class="test col-8 user-select-none">
        <span @click="action.setAction([ActionName.PLANT])">增加1种植</span>
        <span @click="action.setAction([ActionName.WATER])">增加1灌溉</span>
        <span @click="action.setAction([ActionName.FLOWER])">增加1花卉</span>
        <span @click="action.setAction([ActionName.BEEHIVE])">增加1蜂巢</span>
        <span @click="action.setAction([ActionName.FRUIT])">增加1果园</span>
        <span @click="action.setAction([ActionName.TOOL])">增加1工具</span>
      </nav>
    </div>
  </div>
</template>

<style scoped>
.page-part {
  height: 98%;
}

.router-part {
  height: calc(2% + 4px);
}

.test {
  display: flex;
  justify-content: space-around;
}

.test span {
  margin-right: 10px;
}
</style>
